<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<link rel="stylesheet" href="framework/bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="framework/bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/huiyi.css" />
	</head>

	<body>
		<div class="container-fluid" role="navigation">
			<div id="room1">
				<label><img src="images/常用网址/u89.png"/>行政管理<span>></span></label><label>会议室预定</label>
			</div>
			<ul class="nav nav-justified nav-pills">
				<li class="active">
					<a href="#room2" data-toggle="tab">会议室预定</a>
				</li>
				<li>
					<a href="#room3" data-toggle="tab">会议室预定管理</a>
				</li>
				<li>
					<a href="#room4" data-toggle="tab">会议室管理</a>
				</li>
			</ul>
		</div>

		<div class="container-fluid tab-content">
			<div class="row tab-pane active" id="room2">
				<div class='col-sm-4'>
					<div class="form-group">
						<label>选择开始时间：</label>
						<div class='input-group date' id='datetimepicker3'>
							<input type='text' class="form-control" />
							<span class="input-group-addon">  
			                    <span class="glyphicon glyphicon-calendar"></span>
							</span>
						</div>
					</div>
				</div>
				<div class='col-sm-4'>
					<div class="form-group">
						<label>选择结束时间：</label>
						<div class='input-group date' id='datetimepicker4'>
							<input type='text' class="form-control" />
							<span class="input-group-addon">  
			                    <span class="glyphicon glyphicon-calendar"></span>
							</span>
						</div>
					</div>
				</div>
				<!--表格-->
				<div class="container">
					<div class="row">
						<div class="col-xs-11">
							<!--表格头铺-->
							<div class="row" id="title_nav">
								<div class="col-xs-10">
									<label>可预订会议室查询结果：</label>
								</div>
							</div>
							<table class="table table-hover table-bordered table-striped text-center">
								<tr>
									<th class="text-center col-xs-1">选择</th>
									<th class="text-center col-xs-4">会议室名称</th>
									<th class="text-center col-xs-7">会议室描述</th>
								</tr>
								<tr>
									<td><input type="radio" value="radio" /></td>
									<td>2</td>
									<td>3</td>
								</tr>
								<tr>
									<td><input type="radio" value="radio" /></td>
									<td>2</td>
									<td>3</td>
								</tr>
								<tr>
									<td><input type="radio" value="radio" /></td>
									<td>2</td>
									<td>3</td>
								</tr>
							</table>
							<!--分页-->
							<div class="row js_page">
								<div class="col-xs-offset-4 col-xs-4">
									<ul class="pagination">
										<li>
											<a href="javaScript:;" class="btn btn-default">首页</a>
										</li>
										<li>
											<a href="javaScript:;" class="btn btn-default">上页</a>
										</li>
										<li>
											<a href="javaScript:;" class="btn btn-default">下页</a>
										</li>
										<li>
											<a href="javaScript:;" class="btn btn-default">尾页</a>
										</li>
									</ul>
								</div>
							</div>
							<!--预定信息填写-->
							<div class="row" id="roomInfo">
								<form action="" method="post" class="form-inline">
									<div class="form-group">
										<label class="control-label">
											预订人：
										</label>
										<input type="text" placeholder="请输入预订人" class="form-control" />
									</div>
									<div class="form-group">
										<label class="control-label" id="roomType">
											会议室类型：
										</label>
										<select style="width: 200px;" id="" class="form-control">
											<option selected value="选择会议类型">选择会议类型</option>
											<option value="会议">会议</option>
											<option value="培训">培训</option>
											<option value="面试">面试</option>
											<option value="会客">会客</option>
											<option value="其他">其他</option>
										</select>
									</div>
									<div class="form-group">
										<button style="width: 100px;" class="btn btn-default">预定</button>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="tab-pane row" id="room3">
				<div class='tab-pane'>
					<div class='col-sm-4'>
						<div class="form-group">
							<label>选择开始时间：</label>
							<div class='input-group date' id='datetimepicker'>
								<input type='text' class="form-control" />
								<span class="input-group-addon">  
			                    <span class="glyphicon glyphicon-calendar"></span>
								</span>
							</div>
						</div>
					</div>
					<div class='col-sm-4'>
						<div class="form-group">
							<label>选择结束时间：</label>
							<div class='input-group date' id='datetimepicker1'>
								<input type='text' class="form-control" />
								<span class="input-group-addon">  
			                    <span class="glyphicon glyphicon-calendar"></span>
								</span>
							</div>
						</div>
					</div>
					<div class="row col-xs-11" id="roomInfo">
						<form action="" method="post" class="form-inline">
							<div class="form-group">
								<label class="control-label">
											预订人：
										</label>
								<input type="text" placeholder="请输入预订人" class="form-control" />
							</div>
							<div class="form-group">
								<label class="control-label">
											会议室名称：
										</label>
								<input type="text" placeholder="请输入预订人" class="form-control" />
							</div>
							<div class="form-group">
								<label>会议室类型：</label>
								<select style="width: 200px;" id="" class="form-control">
									<option selected value="选择会议类型">选择会议类型</option>
									<option value="会议">会议</option>
									<option value="培训">培训</option>
									<option value="面试">面试</option>
									<option value="会客">会客</option>
									<option value="其他">其他</option>
								</select>
							</div><br />
							<div class="form-group" style="margin-top: 10px;">
								<button style="width: 100px;" class="btn btn-default">查询</button>
							</div>
						</form>
					</div>
					<!--表格-->
					<div class="container">
						<div class="row">
							<div class="col-xs-11">
								<!--表格头铺-->
								<div class="row" id="title_nav">
									<div class="col-xs-10">
										<label>已预订会议室查询结果：</label>
									</div>
								</div>
								<table class="table table-hover table-bordered table-striped text-center">
									<tr>
										<th class="text-center">选择</th>
										<th class="text-center">会议室名称</th>
										<th class="text-center">会议室起始时间</th>
										<th class="text-center">会议室结束时间</th>
										<th class="text-center">会议室用途</th>
										<th class="text-center">记录人</th>
										<th class="text-center">预订人</th>
										<th class="text-center">预定时间</th>
									</tr>
									<tr>
										<td><input type="radio" value="radio" /></td>
										<td>2</td>
										<td>3</td>
										<td>2</td>
										<td>3</td>
										<td>2</td>
										<td>3</td>
										<td>2</td>
									</tr>
									<tr>
										<td><input type="radio" value="radio" /></td>
										<td>2</td>
										<td>3</td>
										<td>2</td>
										<td>3</td>
										<td>2</td>
										<td>3</td>
										<td>2</td>
									</tr>
									<tr>
										<td><input type="radio" value="radio" /></td>
										<td>2</td>
										<td>3</td>
										<td>2</td>
										<td>3</td>
										<td>2</td>
										<td>3</td>
										<td>2</td>
									</tr>
								</table>
								<!--分页-->
								<div class="row js_page">
									<div class="col-xs-offset-4 col-xs-4">
										<ul class="pagination">
											<li>
												<a href="javaScript:;" class="btn btn-default">首页</a>
											</li>
											<li>
												<a href="javaScript:;" class="btn btn-default">上页</a>
											</li>
											<li>
												<a href="javaScript:;" class="btn btn-default">下页</a>
											</li>
											<li>
												<a href="javaScript:;" class="btn btn-default">尾页</a>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
						<div class="form-group" id="quexiao">
							<button style="width: 100px;" class="btn btn-default">取消预约</button>
						</div>
					</div>
				</div>
			</div>
			<div class="tab-pane container" id="room4">
				<div class='row'>
					<div class="col-xs-11">
								<!--表格头铺-->
								<div class="row" id="title_nav">
									<div class="col-xs-10">
										<label>所有会议室信息：</label>
									</div>
									<div class="col-xs-2">
										<img src="images/角色管理/加号.jpg" style="background-color: #D4E6F1;"/>
										<a href="#saveRoom" data-toggle="modal"><label>新增会议室</label></a>
									</div>
								</div>
								<!--新增-->
								<div class="modal fade" id="saveRoom">
									<div class="modal-dialog">
										<div class="modal-content">
											<div class="modal-header">
												<button class="close" data-dismiss="modal">&times;</button>
												<h4 class="modal-title">
													<img src="images/角色管理/u218.png" />
													<span>新增会议室</span>
												</h4>
											</div>
											<div class="modal-body">
												<form action="" method="post" class="form-horizontal">
													<div class="form-group">
														<label for="" class="control-label col-xs-3">
															名称
														</label>
														<div class="col-xs-9">
															<input type="text" placeholder="请输入名称"  class="form-control"/>
														</div>
													</div>
													<div class="form-group">
														<label for="" class="control-label col-xs-3">
															会议室描述
														</label>
														<div class="col-xs-9">
															<textarea class="form-control" cols="30" rows="3" placeholder="会议室描述" ></textarea>
														</div>
													</div>
												</form>
											</div>
											<div class="modal-footer">
												<button type="button" class="btn btn-default">增加</button>
											</div>
										</div>
									</div>
								</div>
								<table class="table table-hover table-bordered table-striped text-center">
									<tr>
										<th class="text-center col-xs-1">选择</th>
										<th class="text-center col-xs-3">会议室名称</th>
										<th class="text-center col-xs-6">会议室描述</th>
										<th class="text-center col-xs-2">操作</th>
									</tr>
									<tr>
										<td><input type="radio" value="radio" /></td>
										<td>2</td>
										<td>3</td>
										<td><a href="">修改</a><a href="">删除</a></td>
									</tr>
									<tr>
										<td><input type="radio" value="radio" /></td>
										<td>2</td>
										<td>3</td>
										<td>2</td>
									</tr>
									<tr>
										<td><input type="radio" value="radio" /></td>
										<td>2</td>
										<td>3</td>
										<td>2</td>
									</tr>
								</table>
								<!--分页-->
								<div class="row js_page">
									<div class="col-xs-offset-4 col-xs-4">
										<ul class="pagination">
											<li>
												<a href="javaScript:;" class="btn btn-default">首页</a>
											</li>
											<li>
												<a href="javaScript:;" class="btn btn-default">上页</a>
											</li>
											<li>
												<a href="javaScript:;" class="btn btn-default">下页</a>
											</li>
											<li>
												<a href="javaScript:;" class="btn btn-default">尾页</a>
											</li>
										</ul>
									</div>
								</div>
							</div>
				</div>
			</div>
		</div>

		<script src="framework/jquery/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="framework/bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/bootstrap.datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
		<script src="js/date.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>